<template>
  <div>
    <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
    <div ref="imageTofile">
      <!-- 这里放需要截图的元素,自定义组件元素也可以 -->
      <div>我是截取的内容</div>
      <div>我是截取的内容</div>
      <div>我是截取的内容</div>
      <div>我是截取的内容</div>
      <div>我是截取的内容</div>
    </div>
    <!-- 如果需要展示截取的图片,给一个img标签 -->
    <img :src="htmlUrl" v-show="isShow" />
    <button @click="toImage">截取</button>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      htmlUrl: "",
      isShow: false,
    };
  },
  methods: {
    // 页面元素转图片
    toImage() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
      }).then((canvas) => {
        let url = canvas.toDataURL("image/png");
        this.htmlUrl = url; // 把生成的base64位图片上传到服务器,生成在线图片地址
        if (this.htmlUrl) {
          // 渲染完成之后让图片显示，用v-show可以避免一些bug
          this.isShow = true;
        }
        // this.sendUrl();
      });
    }, // 图片上传服务器
    sendUrl() {
      // 如果图片需要formData格式,就自己组装一下,主要看后台需要什么参数
      // const formData = new FormData()
      // formData.append('base64', this.company.fileUrl)
      // formData.append('userId', 123)
      // formData.append('pathName', 'pdf')
      //   ==================
      //   this.$ajax({
      //     url: apiPath.common.uploadBase,
      //     method: "post",
      //     data: this.htmlUrl,
      //   }).then((res) => {
      //     if (res.code && res.data) {
      //     }
      //   });
    },
  },
};
</script>

<style scoped></style>
